<style lang="scss" scoped>
@import "@/assets/css/variable";
.activityShow {
  width: 100%;
  padding-bottom: 6.2rem;
  background-color: #f2f2f2;
  min-height: 100%;
  font-size: 1.2rem;
  box-sizing: border-box;
  position: relative;
  flex: 1;
  // overflow: hidden;
  $radiusSize: 100%;
  display: flex;
  flex-direction: column;
  padding: 4rem 1rem 0;

  .my_tuan {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3rem;
    z-index: 2;
    // background: -webkit-linear-gradient(top, #fd8701, #fd8701);
    line-height: 3rem;
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #fff;
    .icon {
      position: absolute;
      top: 50%;
      left: 10px;
      transform: translateY(-50%);
    }
  }
  .van_field {
    box-sizing: border-box;
    margin-bottom: 10px;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
    height: 4rem;
    font-size: 1.2rem;
    display: flex;
    justify-content: space-between;
    line-height: 4rem;
    padding-left: 10px;
    color: #323233;
    background-color: #fff;
    .van-radio--horizontal {
      margin-right: 7px;
    }
  }
  .conter {
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    width: 100%;
    background-color: #fff;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    margin-bottom: 1rem;
    .timer {
      padding: 1rem 1rem;
      color: #999999;
    }
    .middle {
      display: flex;
      .middle_left {
        width: 30%;
        margin: 0.5rem 1rem;
      }
      img {
        width: 100%;
        // height: 100%;
      }
      .middle_right {
        width: 70%;
        margin: 0.5rem 1rem;
        .up {
          display: flex;
          justify-content: space-between;
          margin-bottom: 2rem;
        }
        .pop {
          display: flex;
          justify-content: space-between;
          font-size: 13px;
        }
        span {
          // margin-right: 10px;
          color: #aeaeae;
        }
      }
    }
    .down {
      text-align: right;
      margin-top: 1.5rem;
      color: #fff !important;
      .but {
        padding: 0 8px;
        text-align: center;
        background-color: #fff;
      }
    }
  }
  .retroaction {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    img {
      width: 5rem;
      height: 9rem;
    }
    span {
      text-align: center;
      margin-top: 20px;
      color: #999;
    }
  }
}
</style>
<template>
  <div class="activityShow">
    <div class="my_tuan" :style="{ backgroundColor: theme_color }">
      <van-icon class="icon" name="arrow-left" @click="iconClick" />
      <span>我的订单</span>
    </div>
    <div class="van_field">
      <span>类型</span>
      <van-radio-group
        v-model="status"
        direction="horizontal"
        @change="orderChange"
      >
        <van-radio class="van_radio" name="1">未支付</van-radio>
        <van-radio class="van_radio" name="2">已支付</van-radio>
        <van-radio class="van_radio" name="4">已退款</van-radio>
      </van-radio-group>
    </div>
    <div class="conter" v-for="(item, index) in orderList" :key="index">
      <div class="timer">下单时间：{{ item.createtime }}</div>
      <div class="middle">
        <div class="middle_left">
          <img :src="cover_name.cover" alt="" />
        </div>
        <div class="middle_right">
          <div class="up">
            <span>{{ cover_name.sharetitle }}</span>
            <span>价格: {{ item.price }}元</span>
          </div>
          <div class="pop">
            <span>发货类型: {{ item.prize_type }}</span>
            <span>状态: {{ item.writeoff_name }} </span>
          </div>
          <div class="down">
            <van-button
              class="but"
              size="mini"
              v-show="item.status == 1"
              @click="palyClick(item)"
              >去支付</van-button
            >
            <!-- <van-button class="but" size="mini" v-show="item.status == 2" @click="groupClick(item)">拼团详情</van-button> -->
            <van-button
              class="but"
              size="mini"
              v-show="item.status == 2"
              @click="verificationClick(item)"
              >核销</van-button
            >
            <van-button
              class="but"
              size="mini"
              v-show="item.status == 2 && item.writeoff == 1 && is_refund"
              @click="refundClick(item)"
              >退款</van-button
            >
            <van-button
              class="but"
              size="mini"
              v-show="item.status == 4 || item.status == 1"
              @click="delClick(item)"
              >删除订单</van-button
            >
          </div>
        </div>
      </div>
    </div>

    <div class="retroaction" v-if="orderList.length == 0">
      <img
        src="https://qiniu.longyue8.com/images/4/2021/07/rz7dUAdvZbe75tPAVA22UVTtazbTET.png"
        alt=""
      />
      <span>暂无数据</span>
    </div>
  </div>
</template>

<script>
import {
  Button,
  Toast,
  Tab,
  Tabs,
  Icon,
  Dialog,
  Popup,
  Field,
  RadioGroup,
  Radio,
} from "vant";
// import QRCode from 'qrcode'
// import html2canvas from 'html2canvas'
// import func from 'vue-editor-bridge';
// import utils from '@/assets/js/utils.js'
export default {
  name: "activityShow",
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Button.name]: Button,
    [Icon.name]: Icon,
    [Dialog.name]: Dialog,
    [Popup.name]: Popup,
    [Field.name]: Field,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
  },
  data() {
    return {
      openid: "",
      activity_id: null,
      // status: 1,
      orderList: [],
      item: {},
      status: "2",
      theme_color: "",
      is_refund: false,
      cover_name: {},
      orderItem: {},
      staff_id: null,
    };
  },
  created() {
    // status_group  1 拼团中  2 拼团成功  3 拼团失败
    // localStorage.setItem("COPENID", "obD_t1D_-_MgWCD3T3Jtk6GPdCUw")
    const Item = JSON.parse(localStorage.getItem("OrderItem"));
    this.orderItem = JSON.parse(localStorage.getItem("OrderItem"));
    this.openid =
      localStorage.getItem("COPENID") || "obD_t1D_-_MgWCD3T3Jtk6GPdCUw";
    if (this.$route.query.is_refund != "undefined") {
      this.is_refund = JSON.parse(this.$route.query.is_refund);
    }
    // console.log(this.$route.query.is_refund, 'this.$route.query.is_refund');
    this.activity_id = this.$route.query.activity_id;
    console.log("activity_id", this.activity_id);
    this.staff_id = this.$route.query.staff_id;
    // console.log(this.staff_id, 'this.staff_id');
    this.theme_color = this.$route.hash;
    // console.log(this.theme_color, this.$route.hash, '---------this.theme_color----');
  },
  // computed: {
  //   getOpenId() {
  //     this.openid = this.$store.state.openid
  //     return this.openid
  //   }
  // },
  mounted() {
    // this.activity_id = Item.activityItem.activitys_id;
    this.getGrouorder(this.status);
  },
  methods: {
    getGrouorder(value) {
      let params = {
        openid: this.openid,
        activity_id: this.$route.query.activity_id,
        status: value,
      };
      this.$request.getOrderpage(params).then((res) => {
        this.orderList = res.data.order;
        this.cover_name = res.data.act;
        console.log(this.orderList);
      });
    },
    orderChange(value) {
      // this.status = value
      this.getGrouorder(value);
      // let params = {openid: this.openid, activity_id: this.activity_id, status: value }
      // console.log(params);
      // Toast.loading({
      //   message: '加载中...',
      //   forbidClick: true,
      //   loadingType: 'spinner',
      //   duration: 1000
      // });
      // this.$request.getOrderpage(params).then(res => {
      //   this.orderList = res.data.order
      //   this.cover_name = res.data.act
      //   console.log(this.orderList);
      // })
    },
    // 进入拼团详情
    groupClick(item) {
      console.log(item);
      this.$store.commit("setSaveItem", item);
      this.$router.push(
        `/caseShow/groupBuying/groupDetails/${item.group_id}?order_id=${item.order_id}&activity_id=${this.activity_id}`
      );
    },
    // 去重新支付
    palyClick(item) {
      console.log(item);
      if (item.product_id) {
        let list = JSON.parse(item.product_id)
        this.$store.commit("setSaveItem", item);
        this.$store.commit("getProductList", list);
        return this.$router.push(`/caseShow/moresolitaire/ApplyForm?activity_id=${this.activity_id}&id=${item.id}&staff_id=${this.staff_id}`);
      }
      this.$store.commit("setSaveItem", item);
      this.$router.push(`/caseShow/envelopesTalk/ApplyForm?activity_id=${this.activity_id}&id=${item.id}&staff_id=${this.staff_id}`);
    },
    // 去核销
    verificationClick(item) {
      console.log(item);
      this.$store.commit("setSaveItem", item);
      this.$store.commit("setActivityItem", this.$store.state.activityItem);
      this.$store.commit("setOrderItem", this.orderItem);
      this.$store.commit("setThemeColor", this.theme_color);
      this.$router.push(
        `/caseShow/envelopesTalk/applyPZ?activity_id=${this.activity_id}&id=${item.id}`
      );
    },
    // 退回
    iconClick() {
      this.$router.go(-1);
    },
    // 退款
    refundClick(item) {
      let params = { id: item.id, price: item.price };
      this.$dialog
        .confirm({
          title: "确认要退款吗？",
        })
        .then((res) => {
          this.$request.getOrderRefunds(params).then((res) => {
            if (res.ret == 200) {
              Toast("退款成功！");
              this.getGrouorder(item.status);
            }
          });
        })
        .catch(() => {
          // console.log('取消执行这里')
        });
    },
    // 删除退款订单
    delClick(item) {
      let params = { id: item.id };

      this.$dialog
        .confirm({
          title: "确认要删除订单吗？",
        })
        .then((res) => {
          this.$request.getOrderDel(params).then((res) => {
            if (res.ret == 200) {
              Toast("订单删除成功！");
              this.getGrouorder(item.status);
            }
          });
        })
        .catch(() => {
          // console.log('取消执行这里')
        });
    },
  },
};
</script>